<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul li {
            list-style: none;
        }
        .lbt {
            width: 590px;
            height: 470px;
            border: 1px solid #000;
            position: relative;
        }
        .lbt-img {
            position: relative;
        }
        .lbt-img li {
            position: absolute;
            opacity: 0;
            transition: all 0.5s;
        }

        .lbt-img .current {
            z-index: 1;
            opacity: 1;
        }

        .lbt-round {
            position: absolute;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 10;
        }
        .lbt-round li {
            width: 30px;
            height: 30px;
            border: 1px solid #000;
            border-radius: 50%;
            float: left;
            font-size: 20px;
            text-align: center;
            line-height: 30px;
            margin-right: 5px;
        }
        .btns {
            position: absolute;
            top: 50%;
            width: 590px;
            z-index: 5;
        }
        .btns button {
            position: absolute;
        }
        .btns button:nth-child(2){
            right: 0;
        }
        .active {
            background-color: #111;
            color: #fff;
        }
    </style>
</head>
<body>
    <div class="lbt">
        <ul class="lbt-img">
            <li class="current"><img src="https://imgcps.jd.com/ling/100013362104/56m66LCD5paw5qy-6YCf6YCS/5Lq65rCU55av5oqi5Zeo57-75aSp/p-5bd8253082acdd181d02fa42/77fd8d2f/590x470.jpg" alt=""></li>
            <li><img src="https://img12.360buyimg.com/pop/s590x470_jfs/t1/147692/24/1629/102308/5ef863a9E690b1e51/2231df5a1de265c0.jpg.webp" alt=""></li>
            <li><img src="https://img11.360buyimg.com/pop/s590x470_jfs/t1/122318/12/5974/52449/5efaec34Ea71d3d79/3c07eef6c732bac9.jpg.webp" alt=""></li>
            <li><img src="https://imgcps.jd.com/ling/100008348542/5omL5py66LSt5a6e5oOg/5aSH6LSn6LaF5YC8/p-5bd8253082acdd181d02fa22/465c38f6/590x470.jpg" alt=""></li>
            <li><img src="https://img30.360buyimg.com/pop/s590x470_jfs/t1/131359/26/3122/72762/5ef7edd9Ea5535818/72ae31f6e9229635.jpg.webp" alt=""></li>
        </ul>
        <ul class="lbt-round">
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
        <div class="btns">
            <button>左按钮</button>
            <button>右按钮</button>
        </div>
    </div>
    <script>
        var lbt = document.querySelector(".lbt");
        // 所有的图片元素
        var imgs = document.querySelectorAll('.lbt-img li');
        console.log(imgs);
        // 获取所有的小圆点
        var list = document.querySelectorAll('.lbt-round li');
        console.log(list);
        // 获取左按钮
        var prev = document.querySelector('.btns button:nth-child(1)');
        console.log(next);
          // 获取右按钮
        var next = document.querySelector('.btns button:nth-child(2)');
        console.log(prev);
        // 表示显示图片的所引张数
        var index = 0;

        // 声明一个函数 animate 是函数的名字
        function animate(index){
            for(var i = 0; i<imgs.length; i++){
                imgs[i].className = "";
                list[i].className = "";
            }
            imgs[index].className = "current";
            list[index].classList = "active"
        }
        
        // animate(3)
        // 右切换按钮
        next.onclick = function(){
            index++;
            if(index == 5) index = 0;
            animate(index)
        }
        
        // 左切换
        prev.onclick = function(){
            index--;
            console.log(index)
            if(index == -1) index = 4;
            animate(index)
        }
        
        // 小圆点点击切换
        for(let k = 0; k<list.length; k++){
            list[k].onclick = function(){
                index = k;
                animate(k)
            }
        }
        
        // 自动播放定时器
        var timer = setInterval(function(){
            next.onclick();
        },2000);
        
        // 鼠标移入事件
        lbt.onmouseenter = function(){
            clearInterval(timer);
        }

        // 鼠标移出事件
        lbt.onmouseleave = function(){
            timer = setInterval(function(){
                next.onclick();
            },2000);
        }
    </script>
</body>
</html>